import React, { Component } from 'react';
import {AppState, Text, StyleSheet, View, TextInput, KeyboardAvoidingView, RefreshControl, Dimensions, ListView, Keyboard, TouchableOpacity, Platform, Alert, SafeAreaView } from 'react-native';
import { Flex, Button, Toast, } from 'antd-mobile-rn';
import constants from '../../../utils/constants';
import moment from 'moment';
import ReportCalendar from '../../../components/reportCalendar';
import { SwipeListView } from 'react-native-swipe-list-view';
import taskService from '../../../service/taskService';
import api from '../../../utils/api';
import zhCn from 'moment/locale/zh-cn';
import { ScrollView } from 'react-native-gesture-handler';
import Iconfont from "../icon/iconfont";
moment.locale("zh-cn");

const screen = Dimensions.get("screen");




//日期列表
const getDates = (date) => {

    const day = moment(date).get("day");

    console.log("ss:", moment(date).format("YYYY-MM-DD"), "---", day);
    const yesterday = moment(date).add(day * -1, "d").toDate();


    const dates = [];




    for (let i = 0; i < 7; i++) {
        dates.push(moment(yesterday).add(i, "d").toDate());
    }

    return dates;

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        position: "relative"
    },
    dateItem: {
        alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 15
    },
    dateItemActive: {
        //backgroundColor: constants.themeColor,
        alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 15,

    },
    dateItemText: {
        color: "#B8B8B8"
    },
    dateItemActiveText: {
        color: "#fff"
    },
    taskTitle: {
        borderLeftWidth: 3,
        borderLeftColor: constants.activeColor,
        paddingLeft: 5,
        flexDirection: "row",
        alignItems: "center",
        position: "relative"
    },
    taskTitleText: {
        color: "#000",
        fontSize: 16,
        fontWeight: "bold"
    },
    studyView: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingTop: 20,
        paddingBottom: 10
    },
    studyText: {
        textAlign: "center",
        marginRight: 5,
        marginTop: 15
    },
    studyHours: {
        color: constants.themeColor,
        fontSize: 45,
        fontWeight: "bold",
        textAlign: "center"
    },
    studyHoursText: {
        textAlign: "center",
        marginLeft: 5,
        marginTop: 15
    },
    taskListBox: {
        borderColor: "#cccccc",
        borderWidth: 2,
        fontSize: 12,
        width: 20,
        height: 20,
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center",
        marginTop: 1,
        color: "#ccc"
    },
    taskListItemName: {
        fontSize: 16,
        color: "#292B4D",
        // marginLeft: 5
    },
    buttomBtnView: {
        position: "absolute",
        bottom: Platform.OS === 'android' ? 15 : 15,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
        width: "100%",

    },
    addTaskView: {
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderColor: "#ddd",
        height: 65,
        bottom: Platform.OS === 'android' ? 0 : 0,



    },
    addTaskViewTextInput: {
        width: "100%",
        height: 65,
        paddingLeft: 50,
        fontSize: 16
    },
    buttomBtn: {
        borderRadius: 15,
        width: 120,
        height: 38,
        backgroundColor: "#fff"

    },
    standalone: {
        marginTop: 30,
        marginBottom: 30,
    },
    standaloneRowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        justifyContent: 'center',
        height: 50,
    },
    standaloneRowBack: {
        alignItems: 'center',
        backgroundColor: '#8BC645',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 15
    },
    backTextWhite: {
        color: '#FFF'
    },
    rowFront: {

        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderBottomColor: '#ddd',
        // borderBottomWidth: 1,
        height: 55,
        flexDirection: "row",
        // paddingLeft: 20
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: "transparent",
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
        borderBottomColor: '#ddd',
        borderBottomWidth: 1,
    },
    backRightBtn: {
        alignItems: 'center',
        bottom: 0,
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        width: 75
    },
    backRightBtnLeft: {
        backgroundColor: 'blue',
        right: 75
    },
    backRightBtnRight: {
        backgroundColor: constants.activeColor,
        right: 0
    },
    controls: {
        alignItems: 'center',
        marginBottom: 30
    },
    switchContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom: 5
    },
    switch: {
        alignItems: 'center',
        borderWidth: 1,
        borderColor: 'black',
        paddingVertical: 10,
        width: Dimensions.get('window').width / 4,
    },
    trash: {
        height: 25,
        width: 25,
    },
    calendarBox: {
        elevation: 5
    }
});

/**
 * 学习任务
 */
export default class Study extends Component {

    static navigationOptions = (e) => {
        return {
            title: "学习",

        }
    }

    constructor(props) {
        super(props);
        this.state = {
            scrollEnabled: true,
            refreshing: true,
            selectDateIndex: 1,
            taskList: [],
            completeTaskList: [],
            calendar: {
                show: false,
                animation: ""
            },
            enabledBottomView: true,
            enabledAddTaskView: false,
            taskDetail: {
                completedCount: 0,
                learndTime: 0,
                total: 0
            },
            currentDate: new Date(),
            keyboradHeight: 0,
            dateMap: {}
        }
        this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    }


    loadDateMap = () => {

        api({
            url: "/task/v2/history",
            method: "POST"
        }).then(data => {
            this.setState({
                dateMap: data.result
            })
        })

    }

    componentWillMount() {
        //键盘消失事件
        //
        this.keyboardDidHide = Keyboard.addListener("keyboardDidHide", () => {
            this.setState({
                enabledAddTaskView: false
            })
        });

        this.keyboardDidShow = Keyboard.addListener("keyboardDidShow", (e) => {
            // this.setState({
            //     keyboradHeight:e.startCoordinates.height
            // })
        });

        AppState.addEventListener("change", (nextAppState) => {
            if (nextAppState === "active") {
                this.loadTaskInfo(this.state.currentDate);
            }
        })


    }

    componentWillUnmount() {
        this.keyboardDidHide.remove();
        this.keyboardDidShow.remove();
        AppState.removeEventListener("change", () => { });
    }

    /**
     * 加载任务信息
     */
    loadTaskInfo = (date) => {
        this.setState({
            refreshing: true
        });
        taskService.getTaskInfo(date).then(data => {
            this.setState({
                refreshing: false
            });
            if (data.success) {
                const { dataVoList } = data.result;
                console.log("task data:", data);
                this.setState({
                    taskList: dataVoList,
                    completeTaskList: dataVoList.filter(t => t.status == 1)
                })
            }

        }).catch(() => {
            this.setState({
                refreshing: false
            });
            Toast.info("网络错误")
        })
    }

    componentDidMount() {


        //this.loadDateMap();

        //this.loadTaskInfo(this.state.currentDate);

        //this.isSign();

        const { appNavigation } = this.props.screenProps;

        console.log("Study appNavigation:", appNavigation);

        // //返回首页事件
        // appNavigation.setParams("homeBack",()=>{
        //     this.loadTaskInfo(this.state.currentDate);
        // });

        



    }

    /**
     * 完成任务
     */
    onTaskBoxClick = (data, status, index, name) => {

        const { currentDate, taskList } = this.state;

        // const list = this.state[name];

        taskList[index]["status"] = status;

        console.log("taskList::", index, taskList);

        this.setState({
            taskList: taskList
        });


        taskService.sign({
            currentDate: currentDate.getTime(),
            sign: status,
            taskId: data.taskId
        }).then(data => {
            this.loadTaskInfo(this.state.currentDate);
        })

    }

    /**
     * 关闭日历
     */
    hideCalendar = () => {
        this.setState({
            calendar: {
                show: true,
                animation: "calendarAnOut"
            }
        })
    }

    onCalendarAnimationEnd = () => {
        if (this.state.calendar.animation === "calendarAnIn") {
            return;
        }
        this.setState({
            calendar: {
                show: false,
                animation: ""
            }
        })
    }

    /**
     * 显示日历
     */
    showCalendar = () => {

        this.setState({
            calendar: {
                show: true,
                animation: "calendarAnIn"
            }

        })
    }


    onDateItemClick = (index, date) => {
        this.setState({ selectDateIndex: index, currentDate: date, taskList: [] });
        this.loadTaskInfo(date);
    }


    //添加任务
    onAddTaskSubmitEditing = (e) => {
        const text = e.nativeEvent.text;
        this.setState({
            enabledAddTaskView: false
        })
        if (text) {
            taskService.create({
                taskName: text,
                taskDate: this.state.currentDate.getTime()
            }).then(data => {
                if (!data.success) {
                    Toast.info(data.msg);
                    return;
                }
                const taskList = [
                    {
                        taskName: text,
                        taskId: data.result
                    }
                ];

                this.state.taskList.forEach(task => {
                    taskList.push(task);
                })
                this.setState({
                    taskList: taskList
                })
                this.loadTaskInfo(this.state.currentDate);
                //
                this.loadDateMap();
            }).catch(() => {

            })

        }
    }

    /**
     * 删除任务
     */
    removeTask = (data, rowId) => {
        const { taskList, currentDate } = this.state;
        // taskService.remove(data.id);
        Alert.alert("提示", "是否删除该任务?", [
            { text: "取消" },
            {
                text: "确定", onPress: () => {
                    console.log("data:", data, rowId);
                    taskList.splice(rowId, 1);
                    // this.setState({
                    //     taskList: taskList
                    // })
                    taskService.remove(data.taskId).then(data => {
                        this.loadTaskInfo(this.state.currentDate);
                        this.loadDateMap();
                    })

                }
            },

        ], { cancelable: true })

    }

    isSign = () => {
        const { appNavigation } = this.props.screenProps;
        api({
            url: "/target/isSignFlag"
        }).then(data => {
            if (data.result) {
                appNavigation.navigate("UserTarget")
            }
        })
    }

    render() {

        const navigation = this.props.navigation;
        const { appNavigation } = this.props.screenProps;

        appNavigation.getParam("refreshData", false);

        console.log("Home appNavigation", appNavigation)

        const { taskList, completeTaskList, enabledBottomView, enabledAddTaskView, taskDetail } = this.state;

        //是否是今天
        const isToday = moment(new Date()).format("YYYY-MM-DD") === moment(this.state.currentDate).format("YYYY-MM-DD");


        // const completeTaskList = taskList.filter(t=>t.status == 1);

        const addTaskViewInput = (<View style={[{ backgroundColor: "#fff" }, Platform.OS === "ios" ? {
            bottom: 0
        } : {}]}>



            <TextInput
                onSubmitEditing={this.onAddTaskSubmitEditing.bind(this)}
                autoFocus={true}
                returnKeyLabel={"确定"}
                returnKeyType={"done"}
                placeholderTextColor={"#ccc"}
                style={[styles.addTaskViewTextInput, { paddingLeft: 50 }]}
                placeholder={"添加新任务..."}>
            </TextInput>

        </View>);

        //新增快捷任务
        const addTaskView = enabledAddTaskView ?
            Platform.OS === "ios" ? (
                <KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={0} contentContainerStyle={{ bottom: 0 }} >

                    {addTaskViewInput}

                </KeyboardAvoidingView>

            ) : addTaskViewInput : undefined;

        const TaskBox = (data) => {
            if (this.state.currentDate.getTime() <= new Date().getTime()) {
                return (<TouchableOpacity onPress={() => {
                    if (data.status === 1) {
                        return;
                    }
                    this.onTaskBoxClick(data);
                }}>

                    <View style={styles.taskListBox}>
                        <Text>√</Text>
                    </View>
                </TouchableOpacity>);
            }
            return undefined;
        }

        const getTitleText = () => {
            if (isToday) {
                return "今日任务"
            }
            return moment(this.state.currentDate).format("MM月D日");
        }

        const taskListNo = taskList.filter(t => t.status == 0);

        const taskListYes = taskList.filter(t => t.status == 1);

        return (
            <SafeAreaView style={styles.container}>
                <View style={{ display: !this.state.calendar.show ? "flex" : "none" }}>
                    <View style={{ alignItems: "center", height: 44, justifyContent: "center" }}>
                        <Text style={{ color: "#000" }}>{moment(this.state.currentDate).format("YYYY年M月")}</Text>
                    </View>

                    <DateWeek
                        dates={getDates(this.state.currentDate)}
                        selectDate={this.state.currentDate}
                        onItemClick={this.onDateItemClick.bind(this)}
                        hasTask={(date) => {
                            const datestr = moment(date).format("YYYY-MM-DD");
                            const dateCount = this.state.dateMap[datestr];
                            if (dateCount != null && dateCount > 0) {
                                const currentDateStr = moment(this.state.currentDate).format("YYYY-MM-DD");
                                if (currentDateStr == datestr) {
                                    return (
                                        <Text style={{ fontSize: 24, fontWeight: "bold", color: "#fff", position: "absolute", bottom: -8 }}>·</Text>
                                    )
                                }
                                return (
                                    <Text style={{ fontSize: 24, fontWeight: "bold", color: constants.activeColor, position: "absolute", bottom: -8 }}>·</Text>
                                )
                            }
                            return undefined;
                        }}
                    />
                </View>
                <View style={{ backgroundColor: "#ffff", overflow: "hidden",marginBottom:2 }}>
                    <View
                        // onAnimationEnd={this.onCalendarAnimationEnd.bind(this)}
                        // animation={this.state.calendar.animation}
                        // duration={150}
                        style={{
                            padding: 5,
                            // height: 320,
                            display: this.state.calendar.show ? "flex" : "none",
                            marginBottom:2,
                            backgroundColor:"#fff"

                        }}
                    >

                        <ReportCalendar

                            itemStyle={(date) => {
                                if (!date) {
                                    return {};
                                }
                                const dateKey = moment(date).format("YYYYMMDD");
                                const nowDate = moment(this.state.currentDate).format("YYYYMMDD");
                                return dateKey === nowDate ? {
                                    backgroundColor: "#FBB03B",
                                    color: "#fff"
                                } : {

                                    };

                            }}
                            date={new Date()}
                            onItemClick={(date) => {
                                this.setState({
                                    currentDate: date,
                                    calendar: {
                                        show: false
                                    }
                                });
                                // this.hideCalendar();
                                this.loadTaskInfo(date);
                            }}

                            hasTask={(date) => {
                                const datestr = moment(date).format("YYYY-MM-DD");
                                const dateCount = this.state.dateMap[datestr];
                                if (dateCount != null && dateCount > 0) {
                                    const currentDateStr = moment(this.state.currentDate).format("YYYY-MM-DD");
                                    if (currentDateStr == datestr) {
                                        return (
                                            <Text style={{ fontSize: 24, fontWeight: "bold", color: "#fff" }}>·</Text>
                                        )
                                    }
                                    return (
                                        <Text style={{ fontSize: 24, fontWeight: "bold", color: constants.activeColor }}>·</Text>
                                    )
                                }
                                return undefined;
                            }}
                        ></ReportCalendar>

                    </View>


                   

                </View>

                <ScrollView>

                    <View style={{ flex: 1, backgroundColor: "#ffffff", marginBottom: 10 }}>


                        <SwipeListView


                            enableEmptySections={true}
                            renderHeader={() => {
                                return (
                                    <View style={{ padding: 15, flex: 1, paddingTop: 5 }}>
                                        <View style={styles.taskTitle}>
                                            <Text style={styles.taskTitleText}>{getTitleText()}</Text>
                                        </View>
                                    </View>
                                )
                            }}



                            dataSource={this.ds.cloneWithRows(this.state.taskList.filter(t => t.status == 0))}
                            renderRow={((data, secId, rowId, rowMap) => (
                                <View style={styles.rowFront}>
                                    <View style={{ width: 50, alignItems: "center", justifyContent: "center" }}>
                                        <TouchableOpacity onPress={() => {
                                            this.onTaskBoxClick(data, 1, rowId, "taskList");
                                        }}>

                                            {/* <View style={styles.taskListBox}>
                                                <Text style={{ color: "#ddd" }}>√</Text>
                                            </View> */}
                                            <Iconfont name="check-box" size={20} color={"#ddd"}></Iconfont>
                                        </TouchableOpacity>
                                    </View>

                                    <View style={{
                                        borderBottomColor: "#ddd",
                                        borderBottomWidth: 1,
                                        width: (screen.width - 50),
                                        height: 55,
                                        justifyContent: "center",
                                        position: "relative"
                                    }}


                                    >
                                        <Text
                                            onPress={() => {
                                                appNavigation.navigate("TaskDetail", {
                                                    id: data.taskId, backStudy: () => {
                                                        this.loadTaskInfo(this.state.currentDate);
                                                    }
                                                });
                                            }}
                                            style={[
                                                styles.taskListItemName,
                                                data.status === 1 ? { color: "#292B4D" } : {}
                                            ]}
                                        >
                                            {data.taskName}
                                        </Text>
                                        <View style={{ position: "absolute", height: 55, alignItems: "center", justifyContent: "center", right: 15 }}>
                                            <Text style={{ color: constants.activeColor }}>{data.process}</Text>
                                        </View>

                                    </View>

                                </View>
                            ))}
                            renderHiddenRow={(data, secId, rowId, rowMap) => {
                                const rowKey = `${secId}${rowId}`;

                                return (
                                    <View style={styles.rowBack}>
                                        <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={() => {
                                            // console.log("rowMap::",rowMap);
                                            // console.log("role::",rowMap[rowKey]);
                                            const row = rowMap[rowKey];
                                            if (row) {
                                                row.closeRow();
                                            }
                                            this.removeTask(data, rowId)
                                        }}>
                                            <Text style={styles.backTextWhite}>删除</Text>
                                        </TouchableOpacity>
                                    </View>
                                );
                            }}
                            rightOpenValue={-75}
                            disableRightSwipe={true}
                            keyboardShouldPersistTaps={"handled"}
                            keyboardDismissMode={"interactive"}
                            renderFooter={(a) => {

                                // if(taskListNo.length == 0){
                                //     return undefined;
                                // }

                                if (this.state.enabledAddTaskView) {
                                    return undefined;
                                }

                                return (

                                    <TouchableOpacity style={{ borderTopColor: "#ddd", borderTopWidth: taskListNo.length == 0 ? 0 : 1, marginTop: -1 }} onPress={() => {
                                        this.setState({
                                            enabledAddTaskView: true
                                        })
                                    }}>
                                        <View style={[styles.rowFront, { borderBottomWidth: 1, borderColor: "#ddd", flex: 1, marginLeft: 50 }]}>
                                            <Text style={{ width: "100%", fontSize: 16, color: "#ccc" }} >

                                                添加新任务...
                                        </Text>

                                        </View>
                                    </TouchableOpacity>
                                )
                            }}
                            onScrollBeginDrag={(e) => {
                                // console.log("onScroll::",event)
                                if (this.state.calendar.show) {
                                    this.hideCalendar();
                                }



                            }}


                        />

                    </View>

                    <View style={{ flex: 1, marginBottom: 5, display: taskList.filter(t => t.status == 1).length > 0 ? "flex" : "none" }}>

                        <SwipeListView


                            enableEmptySections={true}
                            renderHeader={() => {
                                return (
                                    <View style={{ padding: 15, flex: 1, paddingTop: 5 }}>
                                        <View style={styles.taskTitle}>
                                            <Text style={styles.taskTitleText}>已完成</Text>
                                        </View>
                                    </View>
                                )
                            }}



                            dataSource={this.ds.cloneWithRows(taskList.filter(t => t.status == 1))}
                            renderRow={(data, secId, rowId, rowMap) => (
                                <View style={styles.rowFront}>
                                    <View style={{ width: 50, alignItems: "center", justifyContent: "center" }}>
                                        <TouchableOpacity onPress={() => {
                                            this.onTaskBoxClick(data, 0, rowId, "taskList");
                                        }}>
                                            {/* <View style={[styles.taskListBox, { borderColor: constants.activeColor }]}>
                                                <Text style={{ color: constants.activeColor }}>√</Text>
                                            </View> */}
                                            <Iconfont name="check-box" size={20} color={constants.activeColor}></Iconfont>
                                        </TouchableOpacity>
                                    </View>

                                    <View style={{
                                        borderBottomColor: "#ddd",
                                        borderBottomWidth: 1,
                                        width: (screen.width - 44),
                                        height: 55,
                                        justifyContent: "center"
                                    }}>
                                        <Text
                                            onPress={() => {
                                                appNavigation.navigate("TaskDetail", {
                                                    id: data.taskId, backStudy: () => {
                                                        this.loadTaskInfo(this.state.currentDate);
                                                    }
                                                });
                                            }}

                                            style={[styles.taskListItemName, { color: "#ddd" }]}>{data.taskName}</Text>
                                    </View>

                                </View>
                            )}
                            renderHiddenRow={(data, secId, rowId, rowMap) => {
                                const rowKey = `${secId}${rowId}`;
                                return (
                                    <View style={styles.rowBack}>
                                        <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={() => {
                                            // console.log("rowMap::",rowMap);
                                            // console.log("role::",rowMap[rowKey]);
                                            const row = rowMap[rowKey];
                                            if (row) {
                                                row.closeRow();
                                            }
                                            this.removeTask(data, rowId)
                                        }}>
                                            <Text style={styles.backTextWhite}>删除</Text>
                                        </TouchableOpacity>
                                    </View>
                                );
                            }}


                            renderFooter={(a) => {

                                if (taskListYes.length == 0) {
                                    return undefined;
                                }

                                return (

                                    <View style={{ backgroundColor: "#ddd", marginTop: -1, height: 1 }}>
                                    </View>

                                )
                            }}

                            rightOpenValue={-75}
                            disableRightSwipe={true}
                            keyboardShouldPersistTaps={"handled"}
                            keyboardDismissMode={"interactive"}

                            onScrollBeginDrag={(e) => {
                                // console.log("onScroll::",event)
                                if (this.state.calendar.show) {
                                    this.hideCalendar();
                                }



                            }}


                        />


                    </View>
                    {/* {BottomView} */}


                </ScrollView>
                {addTaskView}
            </SafeAreaView >

        )
    }



}


/**
 * 日期
 */
class DateWeek extends Component {




    constructor(props) {
        super(props);
    }


    render() {

        //const items = getDates(this.props.date);
        const items = this.props.dates;
        // const { items } = this.state;
        const { onItemClick, selectDate } = this.props;

        const sdate = moment(selectDate).format("YYYY-MM-DD");

        /**
        * 获取日期样式
        * @param {} index 
        */
        const getDateItemStyle = (date) => {
            const d1 = moment(date).format("YYYY-MM-DD");
            return d1 == sdate ? styles.dateItemActive : styles.dateItem;
        }

        const getDateItemTextStyle = (date) => {
            const d1 = moment(date).format("YYYY-MM-DD");
            return d1 == sdate ? styles.dateItemActiveText : styles.dateItemText;
        }


        const nowDate = moment(new Date()).format("YYYY-MM-DD");

        return (
            <Flex style={{ backgroundColor: "#fff" }}>
                {
                    items.map((date, index) => {
                        const swidth = (screen.width / 7) * 0.7;
                        const d1 = moment(date).format("YYYY-MM-DD");
                        const activeStyle = (date) => {
                            return d1 == sdate ? {
                                backgroundColor: nowDate == d1 ? "#FBB03B" : "#1E2044",
                                alignItems: "center",
                                justifyContent: "center",
                                width: swidth,
                                height: swidth,
                                borderRadius: swidth
                            } : {
                                    backgroundColor: "#fff",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    width: swidth,
                                    height: swidth,
                                    borderRadius: swidth
                                }
                        }
                        return (
                            <Flex.Item activeOpacity={0.3} key={index} style={getDateItemStyle(index)} onPressIn={() => { onItemClick(index, date) }}>
                                <View style={{ marginBottom: 10, width: screen.width / 7, alignItems: "center" }} >
                                    <Text style={{ color: "#5B5B5B" }}>{moment(date).format("dd")}</Text>
                                </View>
                                <View style={{ alignItems: "center", justifyContent: "center" }}>
                                    <View style={[activeStyle(date), { position: "relative" }]}>
                                        <Text style={[getDateItemTextStyle(date), { marginBottom: 0 }]}>{moment(date).format("D")}</Text>
                                        {
                                            this.props.hasTask ? this.props.hasTask(date) : undefined
                                        }
                                    </View>

                                </View>
                            </Flex.Item>
                        )
                    })
                }
            </Flex>
        )
    }

}


